<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElTree } from 'element-plus'
import { Calendar, Search } from '@element-plus/icons-vue'
// import wsjzglService from '@/api/wsjzgl'

// 入参

const form = ref({
  gjz: '',
})

// 生命周期
onMounted(() => {
  // 查询案卷目录
  queryAjml()
})

const defaultProps = {
  children: 'children',
  label: 'mlmc',
}

/*
 * 查询案卷目录
 */
const treeData = ref<any[]>([])
const queryAjml = () => {
  //
}

/*
 * 树节点勾选
 */
const treeRef = ref<InstanceType<typeof ElTree>>()
const treeNodeCheck = () => {
  const nodes = treeRef.value?.getCheckedNodes() as any
  // checkNodes.value = nodes || []
}

/*
 * 生成目录
 */
const createZzml = () => {
  const params = {}
  // wsjzglService
  //   .createZzml(params)
  //   .then((res) => {
  //     //
  //   })
  //   .catch((err) => {
  //     !err.isError && ElMessage({ type: 'warning', message: err.message })
  //   })
}

const dialogVisible = ref(false)

/*
 * 打开弹框
 */
const openDialog = () => {
  //
  dialogVisible.value = true
}

/*
 * 关闭弹框
 */
const closeDialog = () => {
  //

  dialogVisible.value = false
}

/*
 * 保存（成功抛出刷新）
 */
const save = () => {
  const params = {}

  dialogVisible.value = false

  // wsjzglService
  //   .saveZzml(params)
  //   .then((res) => {
  //     //
  //   })
  //   .catch((err) => {
  //     !err.isError && ElMessage({ type: 'warning', message: err.message })
  //   })
}

// 文字过滤
const filterTree = () => {
  // treeRef.value?.filter(form.value.gjz)
}

// 单选框
const radioCurrent = ref()
// 填充内容
const queryForm = ref({
  tclrValue: '',
  cznrValue: '',
  thnrValue: '',
  dqzjValue: '',
  dhzjValue: '',
})

defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="批量修改"
    width="50%"
    :before-close="closeDialog"
    :close-on-click-modal="false"
  >
    <div class="dialog-content">
      <div class="left-tree">
        <el-tabs class="demo-tabs" type="card">
          <el-tab-pane label="案卷">
            <div class="left-content">
              <header class="dialog-header">
                <el-input
                  v-model="form.gjz"
                  autosize=""
                  placeholder="请输入查询关键字"
                  :suffix-icon="Search"
                  @change="filterTree"
                />
              </header>
              <div class="tree-box">
                <el-tree
                  ref="treeRef"
                  node-key="mlbh"
                  :data="treeData"
                  :props="defaultProps"
                  show-checkbox
                  check-strictly
                  default-expand-all
                  highlight-current
                  @check-change="treeNodeCheck"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="right-edit">
        <div class="edit-item">
          <span>修改字段:</span>
          <el-select>
            <el-option>啊啊</el-option>
            <el-option>啊啊1</el-option>
          </el-select>
        </div>
        <div class="edit-item edite-radio">
          <span>修改方式:</span>
          <el-radio-group v-model="radioCurrent" class="ml-4">
            <el-radio value="1">固定填充</el-radio>
            <el-radio value="2">替换填充</el-radio>
            <el-radio value="3">追加填充</el-radio>
          </el-radio-group>
        </div>

        <div class="edit-item" v-if="radioCurrent === '1'">
          <span>填充内容:</span>
          <el-input v-model="queryForm.tclrValue" maxlength="30"></el-input>
        </div>

        <template v-if="radioCurrent === '2'">
          <div class="edit-item">
            <span>查找内容:</span>
            <el-input v-model="queryForm.cznrValue" maxlength="30"></el-input>
          </div>
          <div class="edit-item">
            <span>替换内容:</span>
            <el-input v-model="queryForm.thnrValue" maxlength="30"></el-input>
          </div>
        </template>

        <template v-if="radioCurrent === '3'">
          <div class="edit-item">
            <span>段前追加:</span>
            <el-input v-model="queryForm.dqzjValue" maxlength="30"></el-input>
          </div>
          <div class="edit-item">
            <span>段后追加:</span>
            <el-input v-model="queryForm.dhzjValue" maxlength="30"></el-input>
          </div>
        </template>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-content {
  width: 100%;
  height: 500px;
  display: flex;

  .left-tree {
    width: 50%;

    .left-content {
      display: flex;
      flex-direction: column;
      height: 100%;

      .dialog-header {
        height: 40px;
      }

      .tree-box {
        flex: 1;
        flex-shrink: 0;
        overflow: auto;
      }
    }
  }

  .right-edit {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 30px;

    .edit-item {
      display: flex;
      align-items: center;
      & > span {
        display: block;
        width: 100px;
      }
    }

    .edit-item + .edit-item {
      margin-top: 15px;
    }

    .edite-radio {
      align-items: stretch;
    }
  }
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--el-input-border-color) !important;
}

:deep(.el-select__wrapper) {
  box-shadow: 0 0 0 1px var(--el-border-color) !important;
}

:deep(.el-radio) {
  display: block;
  width: 50%;
}
</style>
